<template>
  <div class="logs-container">
    <div v-for="(log, index) in logsData" :key="log.id" class="log-item">
      <span class="log-time">第{{ index + 1 }}条：</span>
      <span class="log-content">{{
        JSON.parse(log.info).message ? JSON.parse(log.info).message : "-"
      }}</span>
    </div>
    <div v-if="filteredLogs.length === 0" class="empty-logs">暂无日志记录</div>
  </div>
</template>

<script setup>
const props = defineProps({
  ID: {
    type: String,
    default: "",
  },
});
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import VulnDetailDialog from "@/components/vulnDetailDialog/index.vue";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { ElMessage } from "element-plus";
import { getEnvironmentInfo, getVulnTaskDetail } from "@/api/topo";
const logFilter = ref("all");
const logsData = ref([]);
const getVulnTaskDetailFunc = async () => {
  const res = await getVulnTaskDetail(props.ID);
  if (res.code === 200) {
    logsData.value = res.data;
  }
};
// 日志数据
const logs = ref([
  { time: "10:00:00", level: "info", content: "启动验证进程" },
  { time: "10:00:01", level: "info", content: "加载验证环境配置" },
  { time: "10:00:30", level: "info", content: "开始执行漏洞验证" },
  { time: "10:00:45", level: "warning", content: "检测到异常网络连接" },
  { time: "10:01:00", level: "error", content: "目标端口无响应" },
]);
// 过滤后的日志
const filteredLogs = computed(() => {
  if (logFilter.value === "all") {
    return logs.value;
  }
  return logs.value.filter((log) => log.level === logFilter.value);
});
// 处理日志过滤
const handleLogFilter = (command) => {
  logFilter.value = command;
};

// 注册必需的组件
echarts.use([TooltipComponent, GridComponent, LegendComponent]);

// 组件挂载时初始化
onMounted(() => {
  getVulnTaskDetailFunc();
});

// 组件卸载前清理
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .value-text {
    font-size: 16px;
    font-weight: bold;
  }
}
.logs-container {
  width: 100%;
  height: 300px;
  padding-top: 20px;
  overflow-y: auto;
  font-family: monospace;

  .log-item {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    display: flex;

    .log-time {
      color: #909399;
      width: 80px;
      flex-shrink: 0;
    }

    .log-content {
      flex: 1;
    }

    &.log-info {
      color: #606266;
    }

    &.log-warning {
      color: #e6a23c;
      background-color: rgba(230, 162, 60, 0.05);
    }

    &.log-error {
      color: #f56c6c;
      background-color: rgba(245, 108, 108, 0.05);
    }
  }

  .empty-logs {
    text-align: center;
    color: #909399;
    padding: 40px 0;
  }
}

.log-actions {
  display: flex;
  gap: 10px;
}
</style>
